﻿@model Until.ArticleModel
@using Blog1._0.Areas.Admin.Models
@{
    ViewBag.Title = "Edit";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutForm.cshtml";
}

<style type="text/css">
    .img-headshot {
        width: 100px;
        height: 100px;
        border: medium none;
        border-radius: 50%;
        cursor: pointer;
    }
</style>
<div class="layui-col-md12 top10">
    <form class="layui-form" id="form" action="/Blog/Article/Edit" method="post">
        <input name="ArticleID" value="@Model.ArticleID" type="hidden">
        @Html.HiddenFor(x => x.ViewTimes)
        @*@Html.HiddenFor(x => x.CommentNum)*@
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="ArticleTitle" lay-verify="required" lay-vertype="tips" class="layui-input" value="@Model.ArticleTitle" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">摘要</label>
            <div class="layui-input-block">
                <input type="text" name="Abstract" lay-verify="required" lay-vertype="tips" class="layui-input" value="@Model.Abstract" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">网易云外链</label>
            <div class="layui-input-block">
                <input type="text" name="Wyyun" lay-verify="url" lay-vertype="tips" class="layui-input" value="@Model.Wyyun" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <div class="layui-input-inline">
                <input name="ImgUrl" value="@Model.ImgUrl" lay-verify="required" readonly id="HeadShot" class="layui-input">
            </div>
            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button type="button" class="layui-btn layui-btn-primary" id="btnUpload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <div id="layer-photos-demo" class="fr layui-input-inline">
                <img class="img-headshot" id="imgHeadShot" layer-pid="HeadShot" layer-src="@Model.ImgUrl" src="@Model.ImgUrl" alt="封面预览">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="Content" name="Content" lay-verify="concact">@Model.Content</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">添加时间</label>
            <div class="layui-input-block">
                <input type="text" name="CRT_Time" id="CreateOn" readonly lay-verify="required" lay-vertype="tips" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                @Html.DropDownList("CatalogID", null, "-请选择分类-", new Dictionary<string, object> { { "lay-verify", "required" }, { "lay-vertype", "tips" }, { "class", "layui-input" } })
            </div>
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                @Html.DropDownList("TypeID", null, "-请选择类型-", new Dictionary<string, object> { { "lay-verify", "required" }, { "lay-vertype", "tips" }, { "class", "layui-input" } })
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否置顶</label>
            <div class="layui-input-inline">
                @Html.DingRadioHtml(Model.IsTop == true ? true : false)
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                @Html.StatusRadioHtml(Model.IsActive)
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submitForm" id="submitForm">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--LayUI富文本域-->
<script src="~/Areas/Admin/plugins/layui/lay/modules/layedit.js"></script>
<script>
    layui.use(['upload', 'form', 'layedit', 'layer', 'laydate'], function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var form = layui.form;
        var layedit = layui.layedit;
        var laydate = layui.laydate;
        var $ = layui.$;
        laydate.render({
            elem: '#CreateOn',
            type: 'datetime',
            value: '@Model.CRT_Time.ToString("yyyy-MM-dd HH:mm:ss")'
        });
        var uploadInst = upload.render({
            elem: '#btnUpload' //绑定元素
            , url: '/SysSet/Info/ExportFile/' //上传接口
            , size: '@ViewBag.MaxFileUpload'
            , exts: '@ViewBag.UploadFileType'
            , done: function (res) {  //上传完毕回调
                //假设code=0代表上传成功
                if (res.code == 0) {
                    //do something （比如将res返回的图片链接保存到表单的隐藏域）
                    $("#HeadShot").val(res.data.src);
                    $("#imgHeadShot").attr("src", res.data.src);
                    $("#imgHeadShot").attr("layer-src", res.data.src)
                }
                else {
                    var msg = res.msg;
                    layer.msg(msg);
                    return;
                }
            }
            , error: function () { //请求异常回调

            }
        });
        layer.photos({
            photos: '#layer-photos-demo',
            anim: 1
        });
        layedit.set({
            uploadImage: {
                url: '/SysSet/Info/ExportFile/' //接口url
                , type: 'post' //默认post
            }
        });
        form.verify({
            concact: function (value, item) { //value：表单的值、item：表单的DOM对象
                layedit.sync(index);
            }
        })

        //动态添加编辑器源码查看编辑功能
        function setHtmlCodeToEdit(ele, id) {
            $("#" + ele).next().find('div.layui-layedit-tool').append('<i class="layui-icon layui-icon-code-circle" title="查看源码" style="font-size: 18px!important;" onclick="getHtmls(this,' + id + ')">&#xe64b;</i> ');
        }
        //显示原Demo
        getHtmls = function (boj, index) {
            layui.use('layedit', function () {
                var layedit = layui.layedit, $ = layui.jquery;
                var context = layedit.getContent(index);
                if ($(boj).hasClass('layui-icon-code-circle')) {
                    $(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body")
                        .html(HtmlUtil.htmlEncode(context));
                    $(boj).removeClass("layui-icon-code-circle");
                    $(boj).addClass("layui-icon-layouts");
                    $(boj).attr("title", "查看HTML");
                } else if ($(boj).hasClass('layui-icon-layouts')) {
                    $(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body")
                        .html(HtmlUtil.htmlDecode(context));
                    $(boj).removeClass("layui-icon-layouts");
                    $(boj).addClass("layui-icon-code-circle");
                    $(boj).attr("title", "查看源码");
                }
            });
        }

        var HtmlUtil = {
            /*1.用浏览器内部转换器实现html转码*/
            htmlEncode: function (html) {
                //1.首先动态创建一个容器标签元素，如DIV
                var temp = document.createElement("div");
                //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
                (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
                //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
                var output = temp.innerHTML;
                temp = null;
                return output;
            },
            /*2.用浏览器内部转换器实现html解码*/
            htmlDecode: function (text) {
                //1.首先动态创建一个容器标签元素，如DIV
                var temp = document.createElement("div");
                //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
                temp.innerHTML = text;
                //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
                var output = temp.innerText || temp.textContent;
                temp = null;
                return output;
            }
        };

        var index = layedit.build('Content', { tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "face", "link", "unlink", "image", "code", "preview"], height: 600 }); //建立编辑器
        setHtmlCodeToEdit('Content', index);//设置源码菜单

        $(".layedit-tool-preview").click(function () {
            layer.open({
                title: '在线预览',
                shade: 0.2,
                content: layedit.getContent(index),
                area: ['90%', '90%'],//(top.window.innerHeight * 0.80).toString()]
            });
        });

        //提交验证(编码转换)，即便是在源代码的情况下提交也能正确编码提交到数据库
        $("#submitForm").on('click', function () {
            var context = $.trim(layedit.getContent(index));//这里是前面获取到index
            console.log(context)
            if (context.indexOf('<') >= 0) {
                return true;
            }
            else {
                $(document.getElementById("LAY_layedit_" + index)).contents().find("body")
               .html(HtmlUtil.htmlDecode(context));
                layer.msg("已为您自动转换编码")
                return true;
            }
        });

        submitForm(form, "编辑成功"); //监听提交
        $("#CatalogID").val(@Model.CatalogID);
        $("#TypeID").val(@Model.TypeID);
        form.render('select');
    });
</script>
